.agentCenter {
  overflow: visible;
  padding: 15px;
  .remarksMsg {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, .6);
    z-index: 999999;
    .remarksMsgList {
      margin: auto;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      width: 390px;
      height: 332px;
      padding: 35px;
      background: #fff;
      input {
        width: 100%;
        outline: hidden;
        text-indent: 0.5rem;
        font-size: 16px;
        color: #ccc;
        height: 50px;
        line-height: 50px;
        border: 1px solid #CCCCCC;
        margin: 10px 0 20px;
      }
      p {
        font-size: 24px;
        color: #333333;
        text-align: center;
        span {
          float: right;
          font-size: 16px;
          color: #B2B9BE;
        }
        &:nth-child(1) {
          padding-bottom: 17px;
          border-bottom: 1px solid #eee;
          text-align: left;
        }
        &:nth-child(2) {
          margin-top: 15px;
        }
        &:nth-child(3) {
          font-size: 16px;
          color: #999;
          margin: 5px 0;
        }
        &:last-child {
          background: #E0262B;
          height: 50px;
          line-height: 50px;
          font-size: 16px;
          color: #fff;
        }

      }
    }
  }
  .agentCenterTitle {
    width: 100%;
    background: #f9f9f9;
    padding: 25px 0 25px 20px;
    ul {
      overflow: visible;
      li:nth-child(2),
      li:nth-child(3) {
        cursor: pointer;
      }
      li {
        float: left;
        margin-right: 18px;
        line-height: 40px;
        i {
          width: 14px;
          height: 14px;
          border: 1px solid #dcdcdc;
          display: inline-block;
          position: relative;
          top: 2px;
          margin-right: 5px;
        }
        i.on {
          border: 1px solid #2184cf;
          background: #2184cf url('../../../assets/images/theColor/icon/dhIocn.png') center center no-repeat;
          background-size: 15px auto;
        }
      }
      li:nth-child(4) {
        margin-left: 20px;
        position: relative;
        input {
          margin-left: 15px;
          border: 1px solid #ccc;
          width: 100px;
          height: 30px;
          line-height: 30px;
          text-indent: 0.3rem;
          font-family: PingFangSC-Regular;
          font-size: 16px;
          //color: #36464B;
        }
        span {
          position: absolute;
          right: 10px;
          top: 4px;
        }
      }
      li:nth-child(5) {
        width: 290px;
        height: 40px;
        overflow: visible;
        position: relative;
        //section:nth-child(1),
        //section:nth-child(3) {
        //  position: absolute;
        //  top: 10px;
        //  left:0;
        //}
        section:nth-child(2) {
          width: 100%;
          overflow: visible;
          .ivu-slider-bar {
            background: #E0262B;
          }
          .ivu-tooltip-arrow {
            display: none !important;
          }
          .ivu-tooltip-popper[x-placement^=top] {
            padding: 0;
          }
          .ivu-slider-button-wrap {
            //top:-6px;
            .ivu-tooltip-popper {
              //opacity: 0 !important;
              //display: none;
              top: -34px;
              left: -12px;
              will-change: top, left;
            }
            .ivu-slider-button {
              background: #E0262B;
              border: none;
            }
          }
          div {
            display: block !important;
            overflow: visible;
          }
          div:hover {
            display: block !important;
            overflow: visible;
          }
        }
      }
      li:nth-child(6) {
        float: right;
        font-size: 12px;
        width: 130px;
        height: 40px;
        background: #E0262B;
        border-radius: 5px;
        color: #fff;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
      }
    }
    .agentSlider {
      .ivu-tooltip-inner {
        background-color: transparent;
        box-shadow: none;
        color: #000;
      }
    }
  }
  .agentCenterTab {
    margin-top: 10px;
    overflow: visible;
    ul {
      width: 100%;
      overflow: visible;
      .ageCenTabItem:hover {
        background: #f9f9f9;
      }
      .ageCenTabItem {
        line-height: 30px;
        width: 100%;
        padding: 11px 0;
        border-bottom: 1px solid #f9f9f9;
        overflow: visible;
        span {
          display: inline-block;
          font-size: 12px;
          text-align: center;
          flex: 1;
        }
        span:nth-child(2) {
          flex: 1.3;
          color: #D43B3B;
        }

        span:nth-child(2),
        span:nth-child(3),
        span:nth-child(4) {
          font-size: 14px;
        }
        span:nth-child(3) {
          color: #D43B3B;
        }
        span:nth-child(5) {
          flex: 4.3;
          text-align: left;
          input {
            width: 36%;
            height: 28px;
            //flex: 3;
            border: 1px solid #ccc;
            //text-indent: 0.2rem;
            padding: 0 0.2rem;
          }
          span {
            font-size: 12px;
            color: #474E70;
            width: auto;
            margin-left: 10px;
            cursor: pointer;
            i {
              position: relative;
              top: -1px;
              display: inline-block;
              width: 16px;
              height: 16px;
              background: url("../../../assets/images/personal/icon/copys.png") no-repeat;
              background-size: 100% auto;
              vertical-align: middle;
              margin-right: 2px;
            }
          }
          span:nth-child(3),span:nth-child(4) {
            position: relative;
            i {
              width: 14px;
              height: 14px;
              background: url("../../../assets/images/personal/icon/ewm.png") no-repeat;
              background-size: 100% auto;
            }
            .ermImg,.appDownErm{
              position: absolute;
              left: -30px;
              top: -170px;
              z-index: 9;
              width: 160px;
              height: 160px;
              border: 1px solid #ccc;
              border-radius: 20px;
              background: #fff;
              box-shadow: 0 1px 1px 2px #ccc;
              display: none;
              overflow: visible;
              .canvas {
                width: 158px !important;
                height: 158px !important;
                border-radius: 20px;
              }
              &::after {
                content: '';
                position: absolute;
                left: 50%;
                bottom: -22px;
                z-index: 10;
                transform: translateX(-50%);
                border-width: 13px;
                border-style: solid;
                border-color: #fff transparent transparent transparent;
              }
              &::before {
                content: '';
                position: absolute;
                left: 50%;
                bottom: -30px;
                transform: translateX(-50%);
                z-index: 2;
                border-width: 15px;
                border-style: solid;
                border-color: #ccc transparent transparent transparent;
              }
            }
          }
          //span:nth-child(3) div.triangle {
          //  display: none;
          //  z-index: 10;
          //  position: absolute;
          //  left:25px;
          //  top:-25px;
          //  width:0;
          //  height:0;
          //  border-width:26px;
          //  border-style:solid;
          //  border-color: #fff transparent transparent transparent;
          //}
          //span:nth-child(3) div.triangles {
          //  display: none;
          //  z-index: 2;
          //  position: absolute;
          //  left:21px;
          //  top:-25px;
          //  width:0;
          //  height:0;
          //  border-width:30px;
          //  border-style:solid;
          //  border-color: #ccc transparent transparent transparent;
          //}
          //span:nth-child(3) div img{
          //  width: 100%;
          //  height:auto;
          // margin: 0 auto;
          //}
          //span:nth-child(3):hover div {
          //  display: block;
          //}
        }
        span:nth-child(6) {
          flex: 1.6;
          color: #666;
        }
        span:nth-child(7){
          flex: 0.8;
        }
        //span:nth-child(7) {
        //  width: 120px;
        //  padding: 6px;
        //  color: #474E70;
        //  cursor: pointer;
        //  i {
        //    display: inline-block;
        //    width: 16px;
        //    height: 16px;
        //    background: url("../../../assets/images/personal/icon/myaccount.png") no-repeat;
        //    background-size: 100% auto;
        //    vertical-align: middle;
        //  }
        //}
        //span:nth-child(7):hover {
        //  background: #D43B3B;
        //  color: #fff;
        //  border-radius: 30px;
        //}
      }
      li:nth-child(1) {
        background: #f9f9f9;
        padding: 0px 0;
        height: 32px;
        line-height: 32px;
        span {
          font-size: 12px;
          color: #36464B;
        }
      }
    }
  }
  .pageDevice {
    text-align: right;
    margin-top: 10px;
    padding: 20px 10px 20px 0;
  }
}
